<template>
	<view class="wrap" v-if="hasLoad">
		<view class="carousel">
			<swiper indicator-dots circular="true" duration="400">
				<swiper-item class="swiper-item" v-for="(item, index) in state.photo_list" :key="index">
					<view class="image-wrapper">
						<image :src="item" mode="aspectFit"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="info">
			<view class="b-title">{{state.name}}</view>
			<view class="b-data">
				<view class="s-left">
					<view class="s-worth" v-if="state.multi_spec === 0 && state.order_worth > 0">价值 {{state.order_worth}}元</view>
					<view class="s-amount" v-if="state.multi_spec === 0 && state.order_amount > 0">市场价 <text class="price">{{state.order_amount}}</text>元</view>
					<view class="s-worth" v-if="state.multi_spec === 1">库存 {{state.count_left}}</view>
				</view>
				<view class="s-count">
					<view class="s-left" v-if="state.multi_spec === 0">库存 {{state.count_left}}</view>
					<!--<view class="s-gain">已兑 {{state.count_gain}}</view>-->
				</view>
			</view>
		</view>
		<view class="specs" v-if="state.spec_list">
			<view class="b-title">选择规格</view>
			<view class="b-items">
				<view class="b-item" v-for="(item, index) in state.spec_list" :key="index"
					:class="{'f-active': index == specIndex}" @click="onSpecSelect(index)">{{item.name}}</view>
			</view>
			<view class="b-data">
				<view class="s-left">价值 {{state.spec_list[specIndex].worth}}元</view>
				<view class="s-gain" style="color: #ccc;">市场价 <text style="text-decoration: line-through;">{{state.spec_list[specIndex].amount}}</text>元</view>
			</view>
			<view class="b-data">
				<view class="s-left">库存 {{state.spec_list[specIndex].count_left}}</view>
				<!--<view class="s-gain">已兑 {{state.spec_list[specIndex].count_gain}}</view>-->
			</view>
		</view>
		<view class="content">
			<view class="b-title">
				<view class="iconfont icon-line"></view>
				<view class="s-tit">礼品详情</view>
				<view class="iconfont icon-line"></view>
			</view>
			<view class="b-rich">
				<rich-text :nodes="goodContent"></rich-text>
			</view>
		</view>
		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText" :top="300"></load-more>
		
	</view>
</template>

<script>
	import {
		getDetail,
		getDetailPre
	} from '@/service/api/card.js'
	import {
		formatRichText
	} from '@/common/util.js'
	import mixinsCommon from '@/mixins/common.js'
	//import mixinsAuth from '@/mixins/cardAuth.js'
	export default {
		mixins: [mixinsCommon, /*mixinsAuth*/],
		data() {
			return {
				state: {},
				specIndex: 0,
				hasLoad: false,
				loadingType: 1,
				loadingText: '',
				cardPreKey: '',
				flag: '',
				cardId: '',
			}
		},
		onLoad(options) {
			// 获取url地址中的参数
			const pages = getCurrentPages()
			const page = pages[pages.length - 1]
			const options2 = page.$page.options
			
			this.flag = options2.f || ''
			this.cardPreKey = options2.ck || ''
			this.cardId = options2.cid || ''
			
			this.loadDetail(options.gift_id)
		},
		computed: {
			goodContent() {
				return formatRichText(this.state.content)
			},
		},
		methods: {
			loadDetail(giftId) {
				console.log(this.cardPreKey,this.flag,this.cardId)
				//getDetail(giftId).then(([err, res]) => {
				getDetailPre(giftId, this.cardPreKey, this.flag, this.cardId).then(([err, res]) => {
					console.log('getDetailPre', err, res)
					if (!err) {
						this.hasLoad = true
						this.loadingType = -1
						this.state = res
					} else {
						this.loadingType = 3
						this.loadingText = err.data.msg || '加载失败'
					}
				})
			},
			onSpecSelect(index) {
				this.specIndex = index
				const specData = this.state.spec_list[this.specIndex]
				this.state.order_worth = specData.worth
				if (this.state.order_state == 0) {
					if (specData.count_left <= 0) {
						this.state.order_state = 4
					}
				} else if (this.state.order_state == 4) {
					if (specData.count_left > 0) {
						this.state.order_state = 0
					}
				}
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: env(safe-area-inset-bottom);
		background: $pq-bg-color;
	}

	.wrap {}


	.carousel {
		height: 500upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 320upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}
	}

	.info {
		padding: 30upx;
		background: #fff;

		.b-title {
			font-size: 28upx;
		}

		.b-data {
			margin-top: 20upx;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;

			.s-left {
				.s-worth {
					color: #999;
					font-size: 24upx;
					margin-bottom: 10upx;
				}

				.s-amount {
					color: #ccc;
					font-size: 24upx;
					
					.price {
						text-decoration: line-through;
					}
				}
			}

			.s-count {
				color: #999;
				font-size: 24upx;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.s-left, .s-right {
					text-align: left;
				}

				.s-gain {
					margin-left: 40upx;
				}
			}
		}
	}

	.specs {
		margin-top: 30upx;
		padding: 30upx;
		background: #fff;

		.b-title {
			font-size: 30upx;
		}

		.b-items {
			margin-top: 30upx;

			.b-item {
				margin-right: 20upx;
				padding: 0 40upx;
				height: 60upx;
				line-height: 60upx;
				display: inline-block;
				background: #fff;
				border: 1upx solid #E4EAF1;
				color: #667085;
				font-size: 26upx;

				&.f-active {
					background: #DA5650;
					border: none;
					color: #fff;
				}
			}
		}

		.b-data {
			margin-top: 30upx;
			color: #666;
			font-size: 24upx;
			display: flex;
			align-items: center;

			.s-left {}

			.s-gain {
				margin-left: 40upx;
			}
		}
	}

	.content {
		margin-top: 30upx;

		.b-title {
			display: flex;
			align-items: center;
			justify-content: center;

			.iconfont {
				color: #ccc;
			}

			.s-tit {
				margin: 0 20upx;
				font-size: 24upx;
				color: #666;
			}
		}

		.b-rich {
			margin-top: 30upx;
			padding: 30upx 0;
			background: #fff;
			font-size: 28upx;
		}
	}

	.navbar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100upx;
		background: #fff;
		// border-top: 1upx solid #f6f6f6;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.b-action {
			flex: 1;

			.s-exchange {
				background: #DA5650;
				height: 100upx;
				padding: 0 60upx;
				line-height: 100upx;
				font-size: 30upx;
				color: #fff;
				letter-spacing: 4upx;
				text-align: center;

				&.f-disable {
					background: rgba(218, 86, 80, 0.8)
				}
			}
		}
	}
	.customer-service {
		position: fixed;
		right: 30upx;
		bottom: 120upx;
		z-index: 99;
		text-align: center;
		
		image {
			width: 100upx;
			height: 100upx;
		}
		
		text {
			display: block;
			font-size: 24upx;
			color: #666;
			margin-top: 4upx;
		}
	}
</style>
